<template>
  <header>
    <img src="../assets/images/header-bg.png" alt="">
    <div class="time-wrapper">{{currentTime}}</div>
  </header>
</template>

<script>
import moment from 'moment'

export default {
  data () {
    return {
      currentTime: ''
    }
  },

  created () {
    this.intervalID = setInterval(() => {
      this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss')
    }, 1000)
  },

  beforeDestroy () {
    clearInterval(this.intervalID)
  }
}
</script>

<style lang="less" scoped>
header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  img {
    display: block;
    width: 100%;
  }
  .time-wrapper {
    position: absolute;
    right: 10px;
    top: 12px;
    font-size: 14px;
    color: #fff;
    line-height: 15px;
  }
}
</style>
